<template>
  <view class="page-bg">
    <page-header></page-header>
    <view class='topblock mc-space-between mc-flex-vcenter'>
      <view class="topblock-left">
        <title>皮肤兑换区</title>
        <view class="gift_number mc-flex mc-flex-vcenter">
          <image src='/static/images/ui_liwu_xitubiao.png'></image>
          <text>当前剩余：{{tntegralNum}}张</text>
        </view>
      </view>
      <image src="../../../../static/images/ui_liwu_pifu_bg.png" mode="widthFix" class="topblock-right"></image>
    </view>
    <view class="list_block" v-for="(item,index) in list" :key="index">
      <view class='list_tittle'>{{item.price}}元皮肤，需要兑换劵 x {{item.exchangeCoupon}}</view>
      <view class="list-content mc-flex mc-flex-vcenter">
        <image src="../../../../static/images/ui_liwu_pifu_tubiao.png" mode="widthFix"></image>
        <view class='list_text'>{{item.categoryName}}<text>任选一张</text></view>
		<form report-submit="true" @submit="setFormId">
			<button form-type="submit" :class="item.exchangeCoupon > tntegralNum?'btn-disabled':''" @click="exchange(index)" :disabled="item.exchangeCoupon > tntegralNum">兑换</button>
		</form>
      </view>
    </view>
    <view class="margin-top36 margin-bottom36">
	  <banner-ad></banner-ad>
    </view>
    <view class="rule">
      <view class="rule_title">兑换规则</view>
      <text>1.正确填写兑奖游戏帐号相关信息，如因填写错误漏填不予发放奖品！</text>
      <text>2.登记角色已拥有兑换皮肤、区服、角色名与兑奖登记时填写不一致不予兑换</text>
      <text>3.兑奖后请主动添加客服QQ，并添加客服王者荣耀好友</text>
      <text>4.客服将在游戏中通过【好友赠送皮肤】形式发放奖品</text>
      <text>5.兑奖后请耐心等待，客服会在7个工作日内发放完成</text>
    </view>
  </view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  name: 'more',
  props: {
    d: {
      type: Object
    }
  },
  components: {},
  data() {
    return {
      list: []
    };
  },
  watch: {},
  computed: {
    ...mapGetters('user', ['_gameInfo']),
    tntegralNum: function() {
      return this._gameInfo.tntegralNum || 0;
    }
  },
  methods: {
    ...mapActions('user', ['gameInfoUp']),
    exchange(index) {
      if (this.list[index].exchangeCoupon > this.tntegralNum) return;
      const itemStr = JSON.stringify(this.list[index]);
      uni.navigateTo({
        url: '../found/found?info=' + itemStr
      });
    },
	setFormId(e){
		this.$store.dispatch('common/formIdListUp', { e:e, isSave:true })
	}
  },
  created() {},
  mounted() {},
  onLoad(options) {
    this.list = JSON.parse(options.list).map(item => {
      item.price = parseFloat(item.priceNum) / 100;
      return item;
    });
    if (!this._gameInfo) {
      this.gameInfoUp();
    }
  }
};
</script>
<style lang="scss" scoped>
.topblock {
  width: 100%;
  padding: 160rpx 20rpx 0 70rpx;
  box-sizing: border-box;
  margin-bottom: -80rpx;
}

.topblock-left {
  flex: auto;
}

.topblock-right {
  width: 370rpx;
  flex: none;
}

.topblock title {
  font-size: 48rpx;
  color: #fff;
}

.gift_number {
  position: relative;
  margin-top: 20rpx;
}

.gift_number image {
  width: 32rpx;
  height: 32rpx;
}

.gift_number text {
  color: #fff;
  font-size: 28rpx;
  line-height: 40rpx;
  margin-left: 10rpx;
}

.list_block {
  width: 679rpx;
  border-radius: 10rpx;
  margin: 15rpx auto;
  border: solid 1px #000;
  position: relative;
  background: #fff;

  .list_tittle {
    background: #f3e2fc;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    color: #3210a1;
    line-height: 80rpx;
    text-align: center;
    width: 100%;
    font-size: 28rpx;
  }

  .list-content {
    padding: 20rpx 30rpx;
  }

  image {
    width: 90rpx;
    flex: none;
  }

  .list_text {
    flex: auto;
    margin: 0 20rpx;
  }

  button {
    flex: none;
    width: 140rpx;
    line-height: 70rpx;
    border-radius: 100px;
    font-size: 30rpx;
    // box-shadow: 3px 2px 2px #ccc;
    background: #ff7200;
    color: #fff;
  }

  .btn-disabled {
    background: #b3afae;
  }

  text {
    color: #aaa;
    font-size: 24rpx;
    display: block;
    margin-top: 10rpx;
  }
}

.rule {
  background: #7b58df;
  width: 679rpx;
  color: #fff;
  padding: 0rpx 40rpx 30rpx;
  margin: 100rpx auto 50rpx auto;
  box-sizing: border-box;
  border-radius: 10px;
}

.rule_title {
  line-height: 80rpx;
  font-size: 30rpx;
  color: #fcc71d;
  text-align: center;
}

.rule text {
  font-size: 28rpx;
  display: block;
  margin: 10rpx 0;
}
</style>
